<template>
  <div class="page">
    <!-- 侧滑大学内容 -->
    <school-detail ref="refsSchoolDetail" @event="getData"></school-detail>

    <breadcrumb>备选库</breadcrumb>
    <sideslip ref="sideslip" @bindevent="getData">
      <school-sideslip ref="child"></school-sideslip>
    </sideslip>
    <div class="content scroll-wrap" v-if="list.length > 0">
      <!-- <div class="top-select">
        <select-sort @event="bindSelect"></select-sort>
      </div> -->

      <div v-for="(item,index) in list" :key="index" v-if="item.choose">
        <ul class="line flex-row">
          <li class="probability">
            <block type="probability" :data="{id:item.chongShouBao.id, name:item.chongShouBao.name, probability:item.probability}" :item="item"></block>
          </li>
          <li class="flex" @click="bindSchool(item)">
            <block type="school" :data="{img:item.schoolBadge, name:item.collegeName, city:item.city,  typeName:item.collegeTypeName,level:item.collegeLevelList}" :item="item"></block>
          </li>
          <li>
            <block type="plan" :data="{year:item.year, plan:item.studentPlan, list:item.collegeScoreLines}" :item="item"></block>
          </li>
          <li class="p0-20 flex-row--c">
            <div>
              <div>
                <div class="block-btn--blue" @click="get(item)">选择专业</div>
                <div class="block-btn--del" @click="del(item);item.choose=false">删除</div>
              </div>
              <div class="major-cnt">已选<em class="c-blue">{{item.maJorCnt||0}}</em>个专业</div>
            </div>
          </li>
        </ul>
      </div>

      <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
    </div>
    <no-content v-else :text="text" style="width:100%"></no-content>
  </div>
</template>

<script>
import { api } from '@/utils'
import selectSort from '~/components/slot/select-sort'
import schoolDetail from '../school/school-detail'
import _ from 'lodash'

import schoolSideslip from './school-sideslip'
const COMPONENTS = {
  selectSort,
  schoolSideslip,
  schoolDetail
}
export default {
  layout: 'zhiyuan-select',
  components: COMPONENTS,
  data () {
    return {
      list: [],
      params: {
        page: 0,
        size: 15
      },
      totalElements: 0,
      page: 1,
      loading: false,
      text: '正在加载...'
    }
  },
  created () {
    this.list = []
    this.getData()
  },
  methods: {
    // 点击学校右侧弹出
    bindSchool (data) {
      // this.id = data.collegeId
      this.$refs.refsSchoolDetail.init(data) // 大学详情ID
    },
    // bindTabs (active) {
    //   // 如果窗口打开则关闭
    //   this.$refs.sideslip.$emit('event', false)
    //   this.page = 1
    //   this.getData()
    // },
    // bindSelect (value) {
    //   this.page = 1
    //   this.getData()
    // },
    get (data) {
      // 触发滑窗
      this.$refs.sideslip.$emit('event')
      // 触发获取点击学校所有专业/点击专业获取学校
      // this.$refs.child.$emit('event', data)
      this.$refs.child.init(data)
    },
    del ({id}) {
      // delFirstMajor
      this.$axios.post(api.delFirstCollege, {id: id}).then(data => {
        this.$message.success('成功删除大学')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    getData () {
      this.$axios.get(api.queryFirstChooseCollege, {params: this.params}).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            data.content.forEach(item => {
              if (!item.chongShouBao) {
                item.chongShouBao = {
                  id: 4,
                  name: '数据缺失'
                }
              }
            })
            this.list = data.content
            this.totalElements = data.totalElements
            // 加载状态结束
            this.loading = false
          } else {
            this.text = '暂无数据'
            this.list = []
          }
        } else {
          this.text = '暂无数据'
          this.list = []
          this.totalElements = 0
        }
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },

    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.top-select{
  padding:25px 0 20px;
  border-bottom:1px solid $line;
}
/deep/ .el-tabs__nav-scroll{
  padding:0 10px !important;
}

.block-btn--blue{
  margin-right:20px;
}

.major-cnt{
  margin:10px 0 0 5px;
  display: inline-block;
  padding:0 5px;
  border-radius: 4px;
  border:1px solid $line;
  color:#687080;
  font-size:14px;
  em{
    padding:0 5px;
  }
}

.page {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .content {
    padding: 0;
    flex: 1;
    // overflow: hidden;
    // overflow-y: auto;
  }
}
</style>
